<template>
  <div class="wrapper" @click="closeMEnu">
    <div class="left">
      <ul class="left-box">
        <li
          v-for="algo in algorithmList"
          :key="algo.id"
          class="left-mini-box"
          draggable
          @dragstart="dragstart($event, algo)"
          @dragend="dragend($event, algo)"
        >
          {{ algo.algo }}
        </li>
      </ul>
    </div>
    <div class="mid" id="mid" @contextmenu.prevent>
      <div
        v-for="item in pipeList"
        :key="item.id"
        class="pipe-box"
        @contextmenu.prevent="showMenuFn($event, item)"
      >
        <div
          class="pipe-mini-box"
          @mouseenter="showStatusTips(item, true)"
          @mouseleave="showStatusTips(item, false)"
        >
          {{ item.algo }}
          <div v-if="item.isShowTips" class="pipe-box-status">
            {{ item.status }}
          </div>
          <Arrow :pipeId="item.algo" />
        </div>
      </div>
      <div v-if="showMenu" class="menu" ref="menu">
        <ul class="menu-box">
          <li class="menu-box-option" @click="popMenu(item)">删除</li>
          <li class="menu-box-option">重命名</li>
          <li class="menu-box-option">复制</li>
          <li class="menu-box-option">运行到当前节点</li>
          <li class="menu-box-option">从当前节点运行</li>
        </ul>
      </div>
    </div>
    <div class="right">
      <ul class="right-menu">
        <li
          v-for="detail in detailList"
          :key="detail.key"
          @click="switchDetail(detail.tab)"
        >
          {{ detail.label }}
        </li>
      </ul>
      <div class="right-detail-box">
        <div v-if="showDetailIndex === 'overview'">
          隐私集合求交(PSI) <br />用于跨组织的数据交集查询<br />
          作者<br />
          Rosetta<br />
          支持数据协同方数量<br />
          >=2 <br />支持语言<br />
          SQL<br />
          Python
        </div>
        <div v-if="showDetailIndex === 'input'">input</div>
        <div v-if="showDetailIndex === 'ouput'">ouput</div>
        <div v-if="showDetailIndex === 'code'">code</div>
        <div v-if="showDetailIndex === 'env'">env</div>
      </div>
    </div>
  </div>
</template>
<script>
// export default {
//   data () {
//     return {
//       algorithmList: [
//         { id: 1, algo: 'psi' },
//         { id: 2, algo: 'mpc' },
//         { id: 3, algo: 'Tee' }
//       ]
//     }
//   }
// }
import Arrow from '@/components/Arrow.vue'
export default {
  components: { Arrow },
  data () {
    return {
      isShowTips: false,
      showMenu: false,
      pipeList: [],
      showDetailIndex: 'overview',
      detailList: [
        { id: 1, tab: 'overview', label: '概览' },
        { id: 2, tab: 'input', label: '输入' },
        { id: 3, tab: 'ouput', label: '输出' },
        { id: 4, tab: 'code', label: '代码' },
        { id: 5, tab: 'env', label: '环境' }
      ],
      algorithmList: [
        // notBegin success running failed
        { id: 1, algo: 'psi', status: 'notBegin', isShowTips: false },
        { id: 2, algo: 'mpc', status: 'success', isShowTips: false },
        { id: 3, algo: 'Tee', status: 'running', isShowTips: false }
      ]
    }
  },
  methods: {
    showStatusTips (item, flag) {
      this.isShowTips = flag
      const index = this.pipeList.findIndex(x => x.id === item.id)
      this.pipeList[index].isShowTips = flag
    },
    popMenu () {
      this.showMenu = false
      if (this.pipeList.includes(this.curMenu)) {
        this.pipeList.splice(
          this.pipeList.findIndex(x => x.id === this.curMenu.id),
          1
        )
      }
    },
    closeMEnu (e) {
      const isInMenu = e.target.getAttribute('class').includes('menu')
      if (this.showMenu && !isInMenu) {
        this.showMenu = false
      }
    },
    showMenuFn (e, item) {
      console.log(e)
      const x = e.clientX
      const y = e.clientY
      this.showMenu = true
      this.curMenu = item
      this.$nextTick(() => {
        this.$refs.menu.style.left = x + 'px'
        this.$refs.menu.style.top = y + 'px'
      })
    },
    isBoxIn (event) {
      const box = document.getElementById('mid')
      console.log('box ===>', box)
      const x = event.clientX
      const y = event.clientY
      const x1 = box.offsetLeft
      const y1 = box.offsetTop
      const x2 = box.offsetLeft + box.offsetWidth
      const y2 = box.offsetTop + box.offsetHeight
      if (x < x1 || x > x2 || y < y1 || y > y2) {
        // alert('I am outside')
        return false
      } else {
        // alert('I am inside')
        return true
      }
    },
    isInPipe (item) {
      return this.pipeList.includes(item)
    },
    dragend (e, item) {
      console.log('end event====>', e)
      console.log('end item====>', item)
      const isInSide = this.isBoxIn(e)
      const isInPipe = this.isInPipe(item)
      // 是否已存在相同的节点
      // 无 则添加
      if (isInSide && !isInPipe) {
        this.pipeList.push(item)
      }
    },

    midDragend (e, item) {
      console.log('midend event====>', e)
      console.log('midend item====>', item)
    },
    dragstart (e, item) {
      console.log('event====>', e)
      console.log('item====>', item)
    },
    switchDetail (item) {
      this.showDetailIndex = item
    }
  }
}
</script>

<style lang="scss">
html,
body {
  margin: 0;
  box-sizing: border-box;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.wrapper {
  width: 1200px;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  .left {
    flex: 0.5;
    height: 100%;
    background-color: #eee;
    .left-box {
      margin-top: 40px;
    }
    .left-mini-box {
      width: 100px;
      height: 40px;
      margin: 0 auto;
      background-color: rgb(253, 8, 212);
      list-style: none;
      line-height: 40px;
      text-align: center;
      margin-bottom: 20px;
      cursor: pointer;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .mid {
    box-sizing: border-box;
    width: 600px;
    height: 100%;
    background-color: rgb(163, 141, 141);
    padding: 80px 20px 20px;

    .pipe-box {
      margin-bottom: 40px;
      .pipe-mini-box {
        margin: 0 auto;
        text-align: center;
        width: 100px;
        height: 40px;
        line-height: 40px;
        background-color: rgb(8, 135, 253);
        cursor: pointer;
        position: relative;
        .pipe-box-status {
          position: absolute;
          left: -100px;
          top: 0;
          width: 100px;
          height: 40px;
          background-color: rgb(221, 221, 221);
        }
      }
    }
    .menu {
      width: 120px;
      min-height: 100px;
      background-color: #eee;
      box-shadow: 0 0 10px;
      position: fixed;
      cursor: pointer;
      padding: 10px;
      border-radius: 4px;
      .menu-box {
        list-style: none;
        text-align: center;
        .menu-box-option {
          width: 100%;
          &:hover {
            box-shadow: 0 0 3px;
          }
        }
      }
    }
  }
  .right {
    flex: 1;
    height: 100%;
    background-color: #eee;
    .right-menu {
      list-style: none;
      display: flex;
      margin: 40px 0 20px;
      & > li {
        width: 60px;
        height: 40px;
        flex: 1 1 0;
        text-align: center;
      }
    }
    .right-detail-box {
      padding: 20px;
    }
  }
}
</style>
